<template>
    <view>
        <block v-if="_navbar && _navbar.navs && _navbar.navs.length > 0">
            <view
                class="navbar flex-row"
                :style="'background-image: url(' + _navbar.background_image + ');border:1rpx solid ' + _navbar.border_color + ';bottom:' + (is_ipx ? '40' : '0') + 'rpx'"
            >
                <block v-for="(item, index) in _navbar.navs" :key="index">
                    <navigator class="flex-grow-1 flex-y-center" openType="redirect" :url="item.url" v-if="item.item == '1' || item.item == null">
                        <view>
                            <image class="navbar-icon" :src="item.active ? item.logo : item.logo2"></image>
                            <view class="navbar-text" :style="'color: ' + (item.active ? item.title_color : item.title_color2) + ';'">{{ item.title }}</view>
                        </view>
                    </navigator>

                    <navigator class="flex-grow-1 flex-y-center" openType="navigate" :url="'/ymq_canyino2o/pages/extra/weburl?url=' + item.src2" v-if="item.item == '2'">
                        <view>
                            <image class="navbar-icon" :src="item.active ? item.logo : item.logo2"></image>
                            <view class="navbar-text" :style="'color: ' + (item.active ? item.title_color : item.title_color2) + ';'">{{ item.title }}</view>
                        </view>
                    </navigator>

                    <navigator
                        :appId="item.appid"
                        class="flex-grow-1 flex-y-center"
                        extraData=""
                        openType="navigate"
                        path=""
                        target="miniProgram"
                        version="release"
                        v-if="item.item == '3'"
                    >
                        <view>
                            <image class="navbar-icon" :src="item.active ? item.logo : item.logo2"></image>
                            <view class="navbar-text" :style="'color: ' + (item.active ? item.title_color : item.title_color2) + ';'">{{ item.title }}</view>
                        </view>
                    </navigator>
                </block>
            </view>
            <view class="bgf" v-if="is_ipx"></view>
        </block>
    </view>
</template>

<style>
@import './navbar.css';
</style>
